<template>
  <div class="fan-design d-flex">
    <div class="box">
      <!-- 组件类型 -->
      <div class="design-header d-flex a-center">
        <div class="title" :class="{ isTitleWrap: isTitleWrap }">
          {{ title }}
        </div>
        <div class="right">
          <draggable
            class="d-flex drag"
            :sort="false"
            @end="onEnd"
            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
          >
            <div
              class="item d-flex flex-column a-center"
              v-for="(item, index) in elementList"
              :key="item.type"
              @click="doCheck(item, index)"
              :data-item="JSON.stringify(item)"
            >
              <div class="pic">{{ item.name }}</div>
              <RadioGroup v-model="checkType">
                <Radio :label="item.type">{{ item.name }}</Radio>
              </RadioGroup>
            </div>
          </draggable>
        </div>
      </div>
      <!-- center -->
      <draggable
        group="componentsGroup"
        :style="{
          backgroundColor: backgroundColor ? backgroundColor : 'transparent',
          width: bodyWidth
            ? isNaN(bodyWidth)
              ? bodyWidth
              : bodyWidth + 'px'
            : '100%',
          height: bodyHeight
            ? isNaN(bodyHeight)
              ? bodyHeight
              : bodyHeight + 'px'
            : '100%',
        }"
        class="d-flex drag center-drag"
        :disabled="true"
        @mousedown.native="bodyClick"
      >
        <div
          class="item"
          v-for="(item, index) in componentList"
          :key="index"
          :class="{ active: acIndex === index }"
          @mousedown.stop="doClick(item, index)"
          @keydown.enter="deleteCom(item, index)"
        >
          <component
            :is="getComponent(item.element)"
            :elementData="item"
            :isShowLabel.sync="item.isShowLabel"
            :value.sync="item.value"
            :index="index"
            :acIndex="acIndex"
          ></component>
        </div>
      </draggable>
    </div>
    <!-- right -->
    <rightPanel
      :elementData.sync="yuansuData"
      :isFocus.sync="yuansuData.isFocus"
    ></rightPanel>
  </div>
</template>

<script>
import cache from "./index";
export default {
  name: "fan-design",
  props: {
    // 组件标题
    title: {
      default: () => "",
    },
    // title是否换行
    isTitleWrap: {
      default: () => true,
    },
    // 类型数据
    elementList: {
      default: () => "",
    },
    // body背景颜色
    backgroundColor: {
      type: String,
      default: () => "#000",
    },
    // body宽度
    bodyWidth: {
      default: () => 700,
    },
    // body高度
    bodyHeight: {
      default: () => 400,
    },
  },
  components: {
    rightPanel: () => import("./right-panel/index"),
  },
  data() {
    return {
      checkType: "",
      componentList: [],
      acIndex: null,
      yuansuData: {},
    };
  },
  mounted() {
    window.onkeyup = (e) => {
      if (e.keyCode === 8 || e.keyCode === 46) {
        //delete键后执行刷新方法
        this.deleteCom(this.yuansuData, this.acIndex);
      }
    };
  },

  methods: {
    // 拖拽结束
    onEnd(obj) {
      if (obj.originalEvent?.target.className.includes("drag")) {
        var it = JSON.parse(obj.item.dataset.item);
        this.componentList.push(it);
      }
    },
    // 选中类型
    doCheck(item, index) {
      this.checkType = item.type;
    },
    // 获取元素
    getComponent(element) {
      return cache[element];
    },
    // 激活
    doClick(item, index) {
      if (this.acIndex !== index) {
        // console.log("不等于...");
        // 做保存上一个组件操作
      }
      this.acIndex = index;
      this.yuansuData = item;
    },
    // 画布点击
    bodyClick() {
      var isSome = this.componentList.some((it) => it.isShowLabel === false);
      if (!isSome) {
        this.acIndex = null;
      }
    },
    // 删除选中
    deleteCom(item, index) {
      // 删除
      this.componentList.splice(index, 1);
      // 取消激活
      this.acIndex = null;
    },
  },
};
</script>

<style lang="scss" scoped>
.fan-design ::v-deep {
  // 头部·
  .design-header {
    gap: 0 30px;
    padding: 20px;
    // 标题
    .title {
      &.isTitleWrap {
        width: 12px;
        white-space: pre-wrap;
      }
    }
    // 右侧类型
    .right {
      .drag {
        gap: 0 30px;
      }
      .item {
        text-align: center;
        border: 1px solid grey;
        padding: 10px;
        min-width: 96px;
        cursor: pointer;
        .pic {
          margin-bottom: 10px;
        }
      }
    }
  }
  .box {
  }
  // 元素部分
  .center-drag {
    overflow: hidden;
    position: relative;
    .item {
      &.active {
        div {
          border: 1px dashed #fff;
        }
      }
    }
  }
}
</style>
